<lv-group lvDirection="vertical" lvGutter="16px">
  <h3 class="title">Date selection</h3>
  <lv-date-picker
    [(ngModel)]="date"
    lvPlaceholder="Select year"
    lvShowTime="true"
    (ngModelChange)="dateChange($event)"
    (lvOpenChange)="openChange($event)"
    (lvActiveDateChange)="activeDateChange($event)"
    style="width: 368px"
  ></lv-date-picker>
  <p>Date: {{ changeDate | date: 'yyyy-MM-dd HH:mm:ss' }}</p>

  <h3 class="title">Date range selection</h3>
  <lv-date-range-picker
    [(ngModel)]="rangeDate"
    (ngModelChange)="rangeDateChange($event)"
    (lvOpenChange)="openChange($event)"
    (lvActiveDateChange)="activeDateChange($event)"
    style="width: 368px"
  ></lv-date-range-picker>
  <p>Date: {{ changeRangeDate[0] | date: 'yyyy-MM-dd' }} ~ {{ changeRangeDate[1] | date: 'yyyy-MM-dd' }}</p>
</lv-group>
